<template>
  <p style="line-height: 3.125rem; font-size: 1rem; font-weight: bold" class="main_text">结算明细</p>
  <div class="main">
    <!-- ############################################## 查询 ############################################## -->
    <div class="top mb20 p20">
      <el-form :model="inquireData" label-width="6.25rem" class="df">
        <el-form-item label="结算单编号：" style="width: 20%">
          <el-input v-model="inquireData.name" placeholder="结算单编号：" class="mr20" />
        </el-form-item>
        <el-form-item label="结算状态：" style="width: 20%">
          <el-select v-model="inquireData.name" placeholder="结算状态：" class="mr20">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <!-- </div>
                </div> -->
      </el-form>
      <el-button type="primary">查询</el-button>
      <el-button type="primary" plain>重置</el-button>
    </div>
    <!-- ############################################## 表单 ############################################## -->
    <div class="content p20">
      <el-table max-height="300" :data="tableData" border :header-cell-style="{background: '#f0f6fe'}">
        <el-table-column label="创建时间" prop="createdAt" :show-overflow-tooltip="true" />
        <el-table-column label="车牌号码" prop="号牌号码" :show-overflow-tooltip="true" />
        <el-table-column label="对象名称" prop="收款人" :show-overflow-tooltip="true" />
        <el-table-column label="整备质量" prop="整备质量" :show-overflow-tooltip="true" />
        <el-table-column label="单价(元/吨)" prop="单价" :show-overflow-tooltip="true" />
        <el-table-column label="溢价金额" prop="formmakerId" :show-overflow-tooltip="true" />
        <el-table-column label="缺件扣款" prop="缺件扣款" :show-overflow-tooltip="true" />
        <el-table-column label="价款合计" prop="price" :show-overflow-tooltip="true" />
        <el-table-column label="支付类型" prop="formmakerId" :show-overflow-tooltip="true" />
        <el-table-column label="是否付款" prop="formmakerId" :show-overflow-tooltip="true" />
        <el-table-column label="付款日期" prop="formmakerId" :show-overflow-tooltip="true" />
        <el-table-column label="付款人" prop="结算人" />
        <!-- <el-table-column label="备注" fixed="right" width="100">
                    <template #default="props">
                        <el-button size="small" link type="primary" @click="checkDataList(props.row)">查看</el-button>
                    </template>
                </el-table-column> -->
      </el-table>
      <!-- 分页器 -->
      <smartPager
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="total"
        @change="handleCurrentChange" />
    </div>
    <!-- ############################################## 蒙层 ############################################## -->
    <!-- ****************************** 提交审核 ****************************** -->
    <!-- <el-dialog class="dialog" v-model="checkcenterDialogVisible" title="提交审核" width="40%" align-center>

            <template #header>
                <div class="df aic">
                    <el-icon style="color: #fff;" size="20">
                        <Edit />
                    </el-icon>&nbsp;
                    <p style="color: #fff;">提交审核</p>
                </div>
            </template>
            <el-form :model="auditTableData" label-width="120" label-position="left" class="df fww aic jcc">
                <el-form-item label="创建时间：" style="width: 60%;">
                    <el-input v-model="auditTableData.createdAt" placeholder="创建时间：" disabled />
                </el-form-item>
                <el-form-item label="缺件扣款：" style="width: 60%;">
                    <el-input v-model="auditTableData.missingPartsDeducted" placeholder="缺件扣款：" disabled />
                </el-form-item>
                <el-form-item label="价款合计：" style="width: 60%;">
                    <el-input v-model="auditTableData.price" placeholder="价款合计：" disabled />
                </el-form-item>
                <el-form-item label="制单人：" style="width: 60%;">
                    <el-input v-model="auditTableData.formmakerId" placeholder="制单人：" disabled />
                </el-form-item>
                <el-form-item label="审核状态：" style="width: 60%;">
                    <el-select v-model="auditTableData.auditStatus" placeholder="审核状态：" style="width: 100%;">
                        <el-option label="未通过" value="1" />
                        <el-option label="已通过" value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="审核描述：" style="width: 60%;">
                    <el-input v-model="auditTableData.auditDescription" type="textarea" placeholder="审核描述：" />
                </el-form-item>
                <el-form-item label="拒绝原因：" v-if="auditTableData.auditStatus == 1" style="width: 60%;">
                    <el-input v-model="auditTableData.rejectReason" type="textarea" placeholder="拒绝原因：" />
                </el-form-item>
            </el-form>

            <template #footer>
                <el-button type="primary" plain @click="checkcenterDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitAudit">&nbsp;提交&nbsp;</el-button>
            </template>
        </el-dialog> -->
    <!-- ****************************** 查看结算单 ****************************** -->
    <!-- <el-dialog class="dialog" v-model="centerDialogVisible" width="40%" align-center>

            <template #header>
                <div class="df aic">
                    <el-icon style="color: #fff;" size="20">
                        <Edit />
                    </el-icon>&nbsp;
                    <p style="color: #fff;">查看结算单</p>
                </div>
            </template>
            <el-form :model="recordsFormData" label-width="80" label-position="left" class="df fww jcsb">
                <el-form-item label="结算单号:">
                    <span>{{ recordsFormData.formId }}</span>
                </el-form-item>
                <el-form-item label="创建时间:">
                    <span>{{ recordsFormData.createdAt }}</span>
                </el-form-item>
                <el-form-item label="订单号:">
                    <span>{{ recordsFormData.orderSn }}</span>
                </el-form-item>
                <el-form-item label="发起人:">
                    <span>{{ recordsFormData.发起人 }}</span>
                </el-form-item>
                <el-form-item label="备注:">
                    <span>{{ recordsFormData.remarks }}</span>
                </el-form-item>
            </el-form>
            <el-table max-height="300" :data="recordstableData" style="width: 100%" class="mt20" border
                :header-cell-style="{ 'background': '#f0f6fe' }">
                <el-table-column label="订单号" prop="orderSn" width="80" />
                <el-table-column label="车牌号" prop="estimateInfo.carInfo.号牌号码" />
                <el-table-column label="车辆净重(kg)" prop="estimateInfo.carInfo.整备质量" />
                <el-table-column label="缺件扣款" prop="missingPartsDeducted" />
                <el-table-column label="单价(元/吨)" prop="" />
                <el-table-column label="议价金额" prop="formmakerId" width="80" />
                <el-table-column label="价款合计" prop="price" />
                <el-table-column label="说明" prop="remarks" />
            </el-table>

            <template #footer>
                <el-button type="primary" plain @click="centerDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitAudit">&nbsp;提交审核&nbsp;</el-button>
            </template>
        </el-dialog> -->
  </div>
</template>

<script setup lang="ts">
import {ElMessage} from 'element-plus';
import {Wallet, Edit} from '@element-plus/icons-vue';
import {formatTime, formatTimeAll} from '@/filters/index';
import {RequestSettleGetUnBilledSettle, RequestSettleauditSettle, RequestSettleId} from '@/api/path/index.js';
import {ref} from 'vue';
const activeName = ref('-1');
const inquireData = ref<any>({
  value1: '',
  resource: '',
  name: '',
});
const tableData = ref<any>([]);
const checkFormData = ref<any>({});
const centerDialogVisible = ref<any>(false);
const checkcenterDialogVisible = ref<any>(false); //详情
/* ************************ 分页获取数据 ************************ */
const total = ref<any>(10);
const total0 = ref<any>(10);
const total1 = ref<any>(10);
const total2 = ref<any>(10);
const currentPage = ref(1);
const pageSize = ref(10);
const getData = (status: any) => {
  RequestSettleGetUnBilledSettle({
    page: currentPage.value,
    rows: pageSize.value,
  }).then((res: any) => {
    console.log(res);
    res.resultObj.data.forEach((item: any) => {
      item.createdAt = formatTime(item.createdAt);
    });
    tableData.value = res.resultObj.data;
    total.value = res.resultObj.total;
  });
};
const status = ref<any>('');
const handleClick = (tab: any, event: any) => {
  currentPage.value = 1;
  if (tab.props.name == '-1') {
    status.value = '';
    getData(status.value);
  } else {
    status.value = tab.props.name;
    getData(status.value);
  }
};
getData(status.value);
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  getData(status.value);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  getData(status.value);
};
// const handleCurrentChange0 = (val: number) => {
//     console.log(`current page: ${val}`)
//     getData(status.value)
// }
// const handleCurrentChange1 = (val: number) => {
//     console.log(`current page: ${val}`)
//     getData(status.value)
// }
// const handleCurrentChange2 = (val: number) => {
//     console.log(`current page: ${val}`)
//     getData(status.value)
// }
/* ************************ 查看结算单 ************************ */
const recordsFormData = ref<any>({});
const recordstableData = ref<any>([]);
const checkDataList = (row: any) => {
  recordsFormData.value = row;
  centerDialogVisible.value = true;
  RequestSettleId(row.formId).then((res: any) => {
    res.resultObj.createdAt = formatTime(res.resultObj.createdAt);
    recordsFormData.value = res.resultObj;
    recordstableData.value = [res.resultObj];
    console.log(res.resultObj);
  });
};
/* ************************ 审核 ************************ */
const auditTableData = ref<any>();
const auditData = (row: any) => {
  console.log(row);
  row.auditStatus = String(row.auditStatus);
  auditTableData.value = row;
  checkcenterDialogVisible.value = true;
};
/* ************************ 提交审核 ************************ */
const submitAudit = () => {
  auditTableData.value.employee = JSON.parse(localStorage.getItem('roleInfo')!);
  delete auditTableData.value.createdAt;
  RequestSettleauditSettle(auditTableData.value).then((res: any) => {
    console.log(res.success);
    if (res.success == true) {
      ElMessage.success(res.msg);
      checkcenterDialogVisible.value = false;
      getData('');
    } else {
      ElMessage.error(res.msg);
      checkcenterDialogVisible.value = false;
      getData('');
    }
  });
};
/* ************************ 删除 ************************ */
// const delData = (row: any) => {
//     const formimgs = new FormData()
//     formimgs.append('ids', row.inboundId)
//     RequestinboundDeleteList(formimgs).then((res: any) => {
//         if (res.code == 0) {
//             ElMessage.success(res.msg)
//             getData()
//         } else {
//             ElMessage.error(res.msg)
//         }
//     })
// }
</script>

<style scoped lang="scss">
.main {
  width: 100%;

  .top {
    width: 100%;
    background-color: #fff;
  }

  .content {
    width: 100%;
    background-color: #fff;
  }
}

.icon_i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6.875rem;
  right: 0;
  margin: auto 0;
}

.downLoad {
  line-height: 1rem;
  margin-left: 0.625rem;
  color: #116cf8;
}

.el-select {
  width: 100%;
}

.el-input-number {
  width: 100%;
}

.drawer_top {
  width: 100%;
  background-color: #fff;
  border-radius: 0.5rem;
}

/* 弹出框样式 */
::v-deep .el-overlay {
  .el-dialog__header {
    background-color: #116cf8;
    margin-right: 0;

    .el-icon svg {
      color: #fff;
    }
  }

  .el-dialog__title {
    color: #fff;
  }

  .el-button {
    .el-icon svg {
      color: #116cf8;
    }
  }
}

::v-deep .el-drawer {
  .el-overlay .el-icon svg {
    color: red;
  }

  .el-drawer__header {
    margin-bottom: 0;
  }
}

.DocumentNumber {
  .el-button {
    background-color: #fff;
    border: 0.0625rem solid #dcdfe6;
    border-left: none;
  }
}

.drawer_bottom {
  width: 100%;
  height: 10%;
  background-color: #fff;
  padding: 1.25rem;
  position: absolute;
  bottom: 0;
  right: 0;
}

/* 上传框 */
.upload {
  width: 7.625rem;
  height: 7.625rem;
  border-radius: 0.375rem;
  background-color: #fafafa;
  overflow: hidden;
  border: 0.0625rem dashed #cdd0d6;
  position: relative;
}

.upload:hover {
  border: 0.0625rem dashed #116cf8;
  transition: 500ms;

  .add {
    color: #116cf8;
    transition: 500ms;
  }
}

.add {
  font-size: 2.25rem;
  color: #cccccc;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

::v-deep .el-upload-list__item,
::v-deep .el-upload-list__item-thumbnail,
::v-deep .el-upload {
  width: 7.5rem;
  height: 7.5rem;
}

::v-deep .el-upload {
  opacity: 0;
}
</style>
